<template>
  <div>
    <div class="hm-top" id="top">
      <div class="hm-bd cur-justify-between">
        <a href="javascript:void(0)"><img src="../assets/hm-log.png"></a>
        <span class="hm-top-tip">您好，
          <a href="javascript:void(0)" v-if="me.user">{{me.user.userAccount}}</a>
          <a @click="logout()" href="javascript:void(0)">[退出]</a>
        </span>
      </div>
    </div>
    <!-- 个人详情 -->
    <div class="top-grjs">
      <!-- 导航 -->
      <div class="top-guid">
        <div class="layui-breadcrumb hm-bd " lay-separator="|" style="visibility: visible;">
          <div v-for="(item, index) in me.menus" :key="item.id">
            <a :href="item.url" target="_blank">{{item.name}}</a>
            <span v-if="index<me.menus.length-1" lay-separator="">|</span>
          </div>
        </div>
      </div>
      <!--导航 end-->
      <!-- 个人介绍 -->
      <div class="top-grjs-con hm-bd" style="align-items: initial;">
        <a href="javascript:void(0)">
          <span class="top-grjs-img" v-if="userInfo.avatar">
            <!-- <img src="../assets/LOGO180-60.png"> -->
            <!-- <img style=" width: 80px;height: 80px;vertical-align: 0px;" v-if="userInfo.avatar&&/^[0-9]$/.test(userInfo.avatar)" :src="defaultAvatar">
            <img style=" width: 80px;height: 80px;vertical-align: 0px;" v-if="userInfo.avatar&&!/^[0-9]$/.test(userInfo.avatar)" :src="userInfo.avatar" id="basInfoImg"> -->
            <img style=" width: 80px;height: 80px;vertical-align: 0px;" :src="userInfo.avatar">
            <!-- <img src="img/rz-tip.png"> -->
          </span>
        </a>
        <span class="top-grjs-txt">
          <!-- <a href="javascript:void(0)"> -->
          <h1>{{userInfo.userAccount}}</h1>
          <!-- </a> -->
        </span>
      </div>
      <!-- 个人介绍 end -->
    </div>
  </div>
</template>

<script>
import { mapState } from 'vuex'
import * as api from '@/service/api'
export default {
  data () {
    return {
      visible: false,
      loading: false,
      defaultAvatar: '',
      defaultImg: ''
    }
  },
  computed: {
    // isCollapse () {
    //   return this.$store.state.toggleBar
    // },
    userId () {
      return this.$store.state.me.user.userId
    },
    ...mapState({
      me: state => state.me,
      userInfo: state => state.me.user || {}
    })
  },
  mounted () {
    this.defaultAvatar = `static/img/avatar${this.userInfo.avatar}.png`
    this.defaultImg = 'static/img/avatar1.png'
  },
  watch: {
    userInfo () {
      if (this.userInfo.avatar) {
        this.defaultAvatar = `static/img/avatar${this.userInfo.avatar}.png`
        this.defaultImg = 'static/img/avatar1.png'
      }
    }
  },
  methods: {
    async modifyUserFoot (item) {
      try {
        await api.modifyUserFoot({
          userId: this.userId,
          siteUrl: item.url,
          siteName: item.siteName,
          siteLogo: item.siteLogo
        })
      } catch (e) {
        console.log(e)
      }
    },
    async logout () {
      // this.$store.dispatch('delAllViews')
      this.$store.dispatch('loginOut')
    }
  }
}
</script>

<style lang="scss" scoped>
.nav {
  margin-left: $sidebar-width;
  height: $navbar-height;
  z-index: 1000;
  background-color: #fff;
  padding: 0 20px;
  box-sizing: border-box;
  &-content {
    height: 100%;
  }
  &-left {
    padding: 10px;
    cursor: pointer;
  }
  &-right {
    height: $navbar-height;
    padding: 16px;
    ul {
      display: flex;
    }

    li {
      font-size: 16px;
      line-height: 40px;
      cursor: pointer;
    }

    li:last-child {
      padding: 0 0 0 30px;
      color: $danger;
    }

    li:hover {
      opacity: 0.8;
    }
  }
}
.nav.hideBar {
  margin-left: 60px !important;
  transition: margin 0.5s;
}
.nav.showBar {
  margin-left: $sidebar-width !important;
  transition: margin 0.5s;
}
</style>
